import React, { useState } from 'react'
import request from '../../../api/request'
import { Button, Select } from 'antd'
import md5 from 'md5'
function Index() {
    const [list, setList] = useState('蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。 AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行')
    const appkey = '297724bd081fdedf'
    const appsecret = '7hk4wBkYhKHP8hyVAzlqEuhImD0QtMKr'
    const salt = Date.now()
    const sign = md5(appkey + list + salt + appsecret)
    const fy = async () => {
        const res = await request.get('/youdao/api', {
            params: {
                q: list,
                from: 'auto',
                to: 'auto',
                appKey: appkey,
                salt: salt,
                sign: sign
            }
        })
        console.log(res);
        setList(res.data.translation[0])
    }

    // 主题切换
    const huan=(value)=>{
        document.documentElement.setAttribute('data-theme',value)
        localStorage.setItem('theme',value)
    }
   

    return (
        <div className='bg-white
            dark:bg-black
            dark:text-white

            lingt:bg-white
            lingt:text-black
        '>
            <p>{list}</p>

            <Select
            style={{zIndex:999999999,width: 120 , position: 'fixed', top: 0, right: 80 }}
                defaultValue={localStorage.getItem('theme')}
                // style={{ }}
                onChange={huan}
                options={[
                    { value: 'lingt', label: '白天' },
                    { value: 'dark', label: '黑夜' },
                    
                ]}
            />

            <Button style={{zIndex:999999999, position: 'fixed', top: 0, right: 0 }} onClick={fy}>中/Eng</Button>
        </div>
    )
}

export default Index
